<!DOCTYPE html>
<html class="loginHtml">
<head>
    <meta charset="utf-8">
    <title>Timely在线客服系统客服登录</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/static/lib/layui-v2.5.4/css/layui.css" media="all" />
 <style>
     .loginHtml,.loginBody{ height:100%;}
     .loginBody form.layui-form{ padding:0 20px; width:300px; height:335px; position:absolute; left:50%; top:50%; margin:-150px 0 0 -150px; -webkit-box-sizing:border-box;-moz-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box; background:#fff;-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; box-shadow:0 0 50px #009688;}
     .login_face{ margin:-60px auto 20px; width:100px; height:50px; -webkit-border-radius:40%; -moz-border-radius:0%; border-radius:0%; border:5px solid #fff; overflow:hidden;box-shadow:0 0 30px #009688;}
     .login_face img{ width:100%;}
     .loginBody .layui-form-item{ position:relative;}
     .loginBody .layui-form-item label{ position:absolute; color:#757575; left:10px; top:9px; line-height:20px; background:#fff; padding:0 5px; font-size:14px; cursor:text;}
     .loginBody .layui-form-item.layui-input-focus label{ top:-10px; font-size:12px; color:#ff6700;}
     .loginBody .layui-form-item.layui-input-active label{ top:-10px; font-size:12px;}
     .loginBody .layui-input::-webkit-input-placeholder{color:#fff;}
     .loginBody .layui-input::-moz-placeholder{color:#fff;}
     .loginBody .layui-input:-ms-input-placeholder{color:#fff;}
     .loginBody .layui-input::placeholder{color:#fff;}
     .loginBody .layui-form-item.layui-input-focus input{ border-color:#ff6700 !important;}
     .loginBody .layui-input-focus .layui-input::-webkit-input-placeholder{color:#757575;}
     .loginBody .layui-input-focus .layui-input::-moz-placeholder{color:#757575;}
     .loginBody .layui-input-focus .layui-input:-ms-input-placeholder{color:#757575;}
     .loginBody .layui-input-focus .layui-input::placeholder{color:#757575;}
     .loginBody .seraph{ font-size:30px; text-align:center;}
     .loginBody .seraph.icon-qq:hover{ color:#0288d1;}
     .loginBody .seraph.icon-wechat:hover{ color:#00d20d;}
     .loginBody .seraph.icon-sina:hover{ color:#d32f2f;}
     .imgCode{ position:relative;}
     #imgCode img{ position:absolute; top:1px; right:1px; cursor:pointer;}
 </style>
</head>
<body class="loginBody">
<form class="layui-form">
    <div class="login_face"><img src="/static/images/logo.png" class="userAvatar"></div>
    <h3 style=";font-weight: 600;">Timely在线客服系统客服登录</h3>
    <div class="layui-form-item input-item" style="margin-top: 10px;">
        <label for="userName">客服名</label>
        <input type="text" placeholder="请输入客服名" autocomplete="off" id="userName"  name='username' class="layui-input" lay-verify="required">
    </div>
    <div class="layui-form-item input-item">
        <label for="password">密码</label>
        <input type="password" placeholder="请输入密码" autocomplete="off" id="password"  name='password'  class="layui-input" lay-verify="required">
    </div>
    <div class="layui-form-item input-item" id="imgCode">
        <label for="code">验证码</label>
        <input type="text" placeholder="请输入验证码" autocomplete="off" id="code"  name="captcha" class="layui-input">
        <img id="captchaPic" src="{:captcha_src()}" onclick="changeCaptcha(this)" style="width: 100px;height: 100%" >
    </div>
    <div class="layui-form-item">
        <button class="layui-btn layui-block" lay-filter="login" lay-submit>登录</button>
    </div>
    <div class="layui-form-item layui-row">
        <a href="javascript:;" class="seraph icon-qq layui-col-xs4 layui-col-sm4 layui-col-md4 layui-col-lg4"></a>
        <a href="javascript:;" class="seraph icon-wechat layui-col-xs4 layui-col-sm4 layui-col-md4 layui-col-lg4"></a>
        <a href="javascript:;" class="seraph icon-sina layui-col-xs4 layui-col-sm4 layui-col-md4 layui-col-lg4"></a>
    </div>
</form>
<script src="/static/lib/layui-v2.5.4/layui.js" charset="utf-8"></script>
<script>
    layui.use(['form','layer','jquery'],function(){
        var form = layui.form,
            layer = parent.layer === undefined ? layui.layer : top.layer
        $ = layui.jquery;


        //登录按钮
        form.on("submit(login)",function(data){
                data = data.field;
                if (data.username == '') {
                    layer.msg('用户名不能为空');
                    return false;
                }
                if (data.password == '') {
                    layer.msg('密码不能为空');
                    return false;
                }
                if (data.captcha == '') {
                    layer.msg('验证码不能为空');
                    return false;
                }
                $.post('/index/Login/loginIn', data, function (res) {
                    if (res.code == 1000) {

                        layer.msg('登录成功', {icon: 1, time: 1500}, function () {
                          //  location.replace(res.data)
                            window.location.href = res.data;
                        });
                    } else {
                        layer.msg(res.message, {icon: 2});
                        $("#captchaPic").click();
                    }
                }, 'json');

            return false;
        });

        //表单输入效果
        $(".loginBody .input-item").click(function(e){
            e.stopPropagation();
            $(this).addClass("layui-input-focus").find(".layui-input").focus();
        })
        $(".loginBody .layui-form-item .layui-input").focus(function(){
            $(this).parent().addClass("layui-input-focus");
        })
        $(".loginBody .layui-form-item .layui-input").blur(function(){
            $(this).parent().removeClass("layui-input-focus");
            if($(this).val() != ''){
                $(this).parent().addClass("layui-input-active");
            }else{
                $(this).parent().removeClass("layui-input-active");
            }
        })
    })
    function changeCaptcha(obj) {
        $(obj).attr('src', $(obj).attr('src') + '?t=' + Math.random(100000000,999999999));
    }
</script>
</body>
</html>
